/* 基础设置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 统一使用box-sizing */
}

ul,
ol {
  list-style: none;
}

img {
  display: block; /* 移除底部留白 */
  border: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

b,
strong {
  font-weight: 400;
}

i,
em {
  font-style: normal;
}

u,
ins,
s,
del {
  text-decoration: none;
}

input,
button {
  outline: none;
  border: none;
}

/* 风格设置 */
body {
  font: 12px/1.5 "Microsoft YaHei", Tahoma, Helvetica, Arial, "\5b8b\4f53",
    sans-serif;
  color: #333;
  overflow-y: scroll;
  min-width: 1200px;
  background-color: #fff; /* 全局背景白色 */
}

a {
  text-decoration: none;
  color: #666;
}

a:hover {
  color: #e4393c; /* 京东的标志红色 */
  text-decoration: none;
}

.flleft {
  float: left;
}

.flright {
  float: right;
}

.flclear::after {
  content: "";
  display: block;
  clear: both;
}

.container {
  width: 1190px; /* 宽度保持一致 */
  margin: 0 auto; /* 居中 */
}

.separate {
  font-size: 8px;
  margin: 0 10px;
  vertical-align: middle;
  color: #ccc;
}

/* #region 顶部促销信息条 start */
.top-promo-bar {
  /* 移除背景图片设置，因为图片是 img 元素 */
  height: 58px; /* 容器高度与图片高度一致 */
  background-color: #f10101; /* 可以保留背景色，以防图片加载失败或显示不完全 */
  /* color: #fff; 这部分样式可能不再需要，因为 promo-left 内部只有图片 */
  /* line-height: 58px; 如果 top-promo-bar 内部只有图片，这个可能不需要 */
  /* text-align: center; 这个也可能不需要，如果内部是 Flexbox 居中 */

  /* 对 top-promo-bar 开启 Flexbox，使其内部内容居中 */
  display: flex;
  justify-content: center; /* 水平居中对齐 Flex 子项 */
  align-items: center; /* 垂直居中对齐 Flex 子项 */
  overflow: hidden; /* 防止图片溢出时影响布局，但图片本身宽度大，依然会超出可见区域 */

  /* 新增：确保 top-promo-bar 占据整个视口宽度 */
  width: 100%;
}

.top-promo-bar .container {
  width: auto; /* 让 container 宽度自适应，不限制为 1190px */
  max-width: 1895px; /* 最大宽度为图片宽度 */
  display: flex; /* 让 container 内部也使用 Flexbox */
  justify-content: center; /* 让图片在 container 内居中 */
  align-items: center;
  height: 100%; /* 确保 container 继承父级高度 */
}

.top-promo-bar .promo-left {
  /* 在 Flex 容器中，float 和 display: inline-block 不再需要 */
  float: none;
  /* display: inline-block; 移除 */
  /* vertical-align: top; 移除 */
  display: flex; /* 让 promo-left 自身也成为 Flex 容器，方便内部图片对齐 */
  justify-content: center; /* 确保图片在 promo-left 内居中 */
  align-items: center; /* 垂直居中对齐图片 */
  height: 100%; /* 确保 promo-left 继承高度 */
}

/* 针对 promo-left 内部的 img 标签 */
.top-promo-bar .promo-left img {
  width: 1895px; /* 固定图片宽度 */
  height: 58px; /* 固定图片高度 */
  display: block; /* 确保图片是块级元素，避免底部留白 */
  object-fit: cover; /* 确保图片覆盖指定尺寸，可能会裁剪 */
  /* margin: 0 auto; 在 Flex 容器中，通常不需要 margin auto 来居中 */
}

/* 如果 top-promo-bar 内部有其他链接或文本，也需要调整它们的样式 */
/* 根据您的 HTML，这里只有图片，所以 a 标签样式可能不需要了 */
.top-promo-bar a {
  color: #fff; /* 如果有其他链接，保持白色 */
  font-size: 12px;
  margin: 0 15px;
}
.top-promo-bar a:hover {
  text-decoration: underline;
}

/* 如果您的 HTML 中有 promo-right 元素，确保它的样式也正确处理 */
.top-promo-bar .promo-right {
  float: none; /* 移除浮动 */
  display: flex; /* 使用 flexbox 布局 */
  align-items: center; /* 垂直居中 */
  height: 100%;
}

/* #endregion 顶部促销信息条 end */

/* #region 顶部导航条 start */
.topbar {
  height: 30px;
  background-color: #e3e4e5; /* 浅灰色背景 */
  border-bottom: 1px solid #ddd; /* 细边框 */
}

/* 核心修改：对 topbar 内部的 container 使用 Flexbox */
.topbar .container {
  width: 1190px;
  margin: 0 auto;
  display: flex; /* 开启 Flexbox */
  /* justify-content: flex-end; /* 这一行取消，因为我们用 order 和 flex-grow 来实现左右对齐 */
  align-items: center; /* 垂直居中对齐 */
  /* 移除 .flclear::after 的效果，因为 Flexbox 会处理布局，但保留 .flclear 类在 HTML 中无妨 */
}

/* 移除 .flleft 和 .flright 对这些元素的浮动影响，让 Flexbox 接管 */
.topbar .welcome,
.topbar .list {
  height: 30px; /* 保持高度 */
  line-height: 30px; /* 保持行高 */
  font-size: 0; /* 保持 font-size */
  /* 明确取消浮动，让 Flexbox 接管 */
  /* 这些元素在 Flex 容器内，float 属性会被忽略 */
  float: none !important; /* !important 确保覆盖全局 flleft/flright 类 */
}

/* 调整 .list 内部 li 的对齐方式，使其居中并等间距 */
/* 通过 order 属性控制视觉顺序，让 welcome 在最右边 */
.topbar .welcome {
  order: 2; /* 将 .welcome 的显示顺序设置为最后 */
  margin-left: 20px; /* 可以在 welcome 和 list 之间增加一些间隔 */
  /* 恢复字体大小 */
  font-size: 12px;
}

.topbar .list {
  order: 1; /* 将 .list 的显示顺序设置为第一 */
  flex-grow: 1; /* 让 .list 尽可能占据剩余空间，以便它的内容可以居中 */
  display: flex; /* 让 list 成为 Flex 容器 */
  justify-content: center; /* 让 li 元素在 list 内部居中 */
  gap: 15px; /* 设置 li 之间的间距 */
  align-items: center; /* 确保 li 垂直居中 */
}

.topbar .list li {
  float: none; /* 在 Flex 容器中，li 不再需要浮动 */
}

.topbar .welcome a,
.topbar .list a {
  font-size: 12px; /* 统一设置链接字体大小 */
  vertical-align: middle;
  color: #999; /* 颜色变淡 */
}
.topbar .welcome a.hello {
  color: #666; /* 登录入口颜色深一点 */
  margin-right: 10px;
}
.topbar .welcome a:hover {
  color: #e4393c;
}

/* #endregion 顶部导航条 end */

/* #region 头部 start */
.header {
  height: 140px; /* 增加高度 */
  padding-top: 20px;
  position: relative; /* 用于购物车定位 */

  /* 核心修改：对 header 开启 Flexbox */
  display: flex; /* 让子元素（logo, search-area, shopping-cart）在同一行排列 */
  align-items: center; /* 垂直居中对齐所有子元素 */
  justify-content: space-between; /* 在元素之间平均分配空间，将 logo, search-area, shopping-cart 推开 */

  /* 移除 .flclear 的影响，如果 HTML 中有这个类，最好也从 HTML 移除 */
}

.header .logo {
  float: none; /* 移除浮动 */
  display: flex; /* 让 logo 内部的 img 垂直居中 */
  align-items: center;
  margin-right: 20px; /* 在 logo 和搜索区域之间增加一些间距 */
  /* 保持 logo img 的样式不变 */
}

.header .logo img {
  height: 100px;
  width: auto;
  margin-top: 0; /* 移除负外边距，让 Flexbox 垂直居中 */
}

.header .search-area {
  float: none; /* 移除浮动 */
  /* flex-grow: 1; /* 让搜索区域占据剩余的大部分空间 */
  /* width: 600px; 如果设置 flex-grow，则 width 可以是 max-width 或 flex-basis */
  width: 600px; /* 保持原宽度 */
  margin-left: 0; /* 移除 */
  /* 移除 .flclear 的影响 */
}

.header .search-box {
  height: 36px;
  border: 2px solid #e4393c;
  width: 550px; /* 搜索框整体宽度 */
  float: none; /* 移除浮动 */
  margin-top: 25px; /* 垂直居中，根据实际情况调整 */
  margin-right: 10px; /* 保持外部间距 */
  display: flex; /* Flexbox布局，使input和button对齐 */
  align-items: center; /* 确保 input 和 button 垂直居中对齐 */
}

.header .search-box form {
  display: flex; /* 让 form 成为 Flex 容器，控制 input 和 button */
  width: 100%; /* 让 form 占据 search-box 的全部宽度 */
  height: 100%; /* 让 form 占据 search-box 的全部高度 */
}

.header .search-box input {
  flex: 1; /* 占据剩余空间 */
  height: 32px; /* 比外层小2px，因为有2px边框 */
  padding: 0 10px;
  font-size: 14px;
  border: none; /* 内部input无边框 */
}

.header .search-box button {
  width: 60px; /* 按钮宽度 */
  height: 32px;
  background-color: #e4393c;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header .search-box button i {
  font-size: 18px;
  color: #fff;
}

.header .hot-keywords {
  margin-top: 10px;
  width: 550px; /* 保持宽度与搜索框一致 */
  /* 可以考虑对热词也使用 Flexbox，让它们更好地排列 */
  /* display: flex; */
  /* flex-wrap: wrap; */
  /* gap: 10px; */
}

.header .hot-keywords a {
  font-size: 12px;
  color: #999;
  margin-right: 10px;
}
.header .hot-keywords a:first-child {
  color: #e4393c; /* 第一个关键词红色 */
}

.header .shopping-cart {
  width: 130px;
  height: 36px;
  border: 1px solid #e3e4e5;
  background-color: #f9f9f9;
  line-height: 36px;
  text-align: center;
  margin-top: 25px; /* 根据截图，购物车与搜索框顶部对齐，保留 margin-top */
  margin-right: 10px; /* 保持外部间距 */
  float: none; /* 移除浮动 */
  margin-left: 20px; /* 在搜索区域和购物车之间增加一些间距 */
}
.header .shopping-cart a {
  color: #e4393c;
  font-size: 14px;
  display: block;
}
.header .shopping-cart a i {
  margin-right: 5px;
}
.header .shopping-cart .cart-count {
  display: inline-block;
  background-color: #e4393c;
  color: #fff;
  border-radius: 10px;
  padding: 0 6px;
  font-size: 12px;
  margin-left: 5px;
}

/* #region 头部 end */
/* #region 主导航区 start */
.main-nav {
  height: 48px;
  border-bottom: 2px solid #e4393c; /* 加粗红色底部边框 */
  background-color: #fff; /* 确保背景是白色 */
}

.main-nav .category-panel {
  width: 210px; /* 拓宽分类面板 */
  height: 48px;
  background-color: #e4393c; /* 红色背景 */
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  line-height: 48px;
  cursor: pointer;
}

.main-nav .nav-list {
  padding: 0 10px;
  height: 48px;
  line-height: 48px;
}

.main-nav .nav-list li {
  float: left;
  margin: 0 15px; /* 增加间距 */
}

.main-nav .nav-list a {
  font-size: 16px;
  color: #333;
  font-weight: normal; /* 保持普通粗细 */
}
.main-nav .nav-list a.active,
.main-nav .nav-list a:hover {
  color: #e4393c;
  font-weight: bold; /* 悬停和激活状态加粗 */
}

.main-nav .nav-promo {
  float: right;
  line-height: 48px;
}
.main-nav .nav-promo a {
  font-size: 14px;
  color: #666;
  margin-left: 20px;
}
.main-nav .nav-promo a:hover {
  color: #e4393c;
}

/* #endregion 主导航区 end */

/* #region 主内容区 start */
.main-content {
  margin-top: 10px;
}

/* #region 主内容区-左侧一级导航 start */
.main-content .left-categories {
  width: 210px; /* 与分类面板宽度一致 */
  /* height: 470px; /* 适应轮播图高度 */ /* 移除固定高度，让内容撑开 */
  background-color: #f7f7f7; /* 接近白色 */
  font-size: 0;
  padding: 10px 0; /* 调整内边距 */
  position: relative;
  border: 1px solid #f2f2f2; /* 细边框 */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.05); /* 细微阴影 */
  z-index: 10; /* 提高 z-index，确保在弹出时覆盖其他内容 */
}

.main-content .left-categories li {
  /* height: 28px; /* 移除固定高度 */
  line-height: 24px; /* 调整行高 */
  padding: 3px 15px; /* 调整内边距 */
  /* overflow: hidden; /* 移除 overflow: hidden; */
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  background-color: #fff; /* 默认白色背景 */
  transition: background-color 0.2s; /* 过渡效果 */
  position: relative; /* 新增: 用于定位二级菜单 */
}

.main-content .left-categories li:hover {
  background-color: #d9d9d9;
}

.main-content .left-categories li > a,
.main-content .left-categories li > span {
  font-size: 14px;
  color: #333;
}
.main-content .left-categories li > a:hover {
  color: #e4393c;
}

.main-content .left-categories li > span {
  margin: 0 2px;
}

/* #endregion 主内容区-左侧一级导航 end */

/* #region 主内容区-左侧二级导航 start */
.main-content .left-categories .second-categories {
  width: 800px; /* 调整宽度 */
  min-height: 470px; /* 适配左侧导航高度 */
  background-color: #fff; /* 白色背景 */
  padding: 15px 20px; /* 调整内边距 */
  position: absolute;
  top: -1px; /* 调整位置，使其与 li 顶部对齐 */
  left: 210px; /* 调整位置 */
  border: 1px solid #ddd; /* 调整边框颜色 */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 9; /* 调整 z-index */
  display: none;
}

.main-content .left-categories li:hover .second-categories {
  display: block;
}

.main-content .left-categories .second-categories dl {
  margin-bottom: 15px; /* 调整间距 */
  border-bottom: 1px solid #eee; /* 新增: 分割线 */
  padding-bottom: 10px; /* 新增: 内边距 */
}

.main-content .left-categories .second-categories dt,
.main-content .left-categories .second-categories dd {
  float: left;
  line-height: normal;
  margin: 5px 0;
}

.main-content .left-categories .second-categories dt {
  width: 90px; /* 调整宽度 */
  font-weight: bold;
  text-align: right;
  color: #666; /* 调整颜色 */
  padding-right: 10px; /* 新增: 内边距 */
  white-space: nowrap; /* 新增: 防止换行 */
}

.main-content .left-categories .second-categories dd {
  width: auto; /* 调整宽度 */
  margin-left: 100px; /* 调整边距 */
  line-height: 22px;
}

.main-content .left-categories .second-categories a,
.main-content .left-categories .second-categories span {
  display: inline-block;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
}

.main-content .left-categories .second-categories a {
  margin: 0 10px; /* 调整间距 */
  color: #666;
  white-space: nowrap; /* 新增: 防止换行 */
}

.main-content .left-categories .second-categories a:hover {
  color: #e4393c;
}

.main-content .left-categories .second-categories span {
  margin-right: 10px; /* 调整间距 */
  color: #ccc;
}

/* #endregion 主内容区-左侧二级导航 end */

/* #region 主内容区-中间大图/轮播图区域 start */
.main-content .center-promo {
  width: 790px; /* 根据截图调整宽度 */
  margin: 0 10px; /* 保持与左侧间距 */
  height: 470px; /* 适应左侧分类高度 */
}

/* 轮播图的高度和位置 */
.main-content .center-promo .carousel {
  width: 100%;
  height: 340px; /* 轮播图主体高度 */
  margin-bottom: 10px; /* 与下方小图的间距 */
}

/* 轮播图内部的图片 */
.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 轮播图下方小图区 */
.main-content .center-promo .small-promo-images {
  width: 100%;
  height: 350px; /* 确保总高度达到 */
  display: grid; /* 使用grid布局 */
  grid-template-columns: repeat(4, 1fr); /* 4列，有8个项目时会自动分成2行 */
  gap: 10px; /* 项目之间的间距 */
  /* 移除冲突的flexbox属性 */
  /* justify-content: space-between; */
  /* align-items: center; */
}

.main-content .center-promo .small-promo-images a {
  width: 100%; /* 在grid布局中，子项宽度由grid-template-columns控制 */
  height: auto; /* 保持图片比例 */
  display: block;
  overflow: hidden;
}

.main-content .center-promo .small-promo-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease; /* 放大效果 */
}
.main-content .center-promo .small-promo-images img:hover {
  transform: scale(1.05);
}

/* #endregion 主内容区-中间大图/轮播图区域 end */

/* #region 主内容区-右侧服务区 start */
.main-content .right-service-panel {
  width: 170px; /* 调整宽度 */
  height: 692px; /* 适应整体高度 */
  border: 1px solid #f2f2f2;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.05);
}

.main-content .right-service-panel .user-greeting {
  text-align: center;
  padding: 15px 0;
  border-bottom: 1px solid #f2f2f2;
}
.main-content .right-service-panel .user-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 10px;
  border: 1px solid #ddd;
}
.main-content .right-service-panel .user-greeting p {
  font-size: 14px;
  color: #333;
  margin-bottom: 10px;
}
.main-content .right-service-panel .login-register-buttons {
  display: flex;
  justify-content: center;
  gap: 10px; /* 按钮之间的间距 */
}
.main-content .right-service-panel .login-btn-small,
.main-content .right-service-panel .register-btn-small {
  padding: 5px 12px;
  border-radius: 3px;
  font-size: 12px;
}
.main-content .right-service-panel .login-btn-small {
  background-color: #e4393c;
  color: #fff;
}
.main-content .right-service-panel .login-btn-small:hover {
  background-color: #c91623;
}
.main-content .right-service-panel .register-btn-small {
  background-color: #fff;
  border: 1px solid #ddd;
  color: #666;
}
.main-content .right-service-panel .register-btn-small:hover {
  background-color: #f5f5f5;
  border-color: #e4393c;
  color: #e4393c;
}

.main-content .right-service-panel .news-list {
  padding: 10px 15px;
  border-bottom: 1px solid #f2f2f2;
}
.main-content .right-service-panel .news-header {
  height: 30px;
  line-height: 30px;
  margin-bottom: 5px;
}
.main-content .right-service-panel .news-header h3 {
  float: left;
  font-size: 14px;
  font-weight: bold;
  color: #333;
}
.main-content .right-service-panel .news-header a {
  float: right;
  font-size: 12px;
  color: #999;
}
.main-content .right-service-panel .news-header a i {
  margin-left: 3px;
}
.main-content .right-service-panel .news-list ul li {
  line-height: 22px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.main-content .right-service-panel .news-list ul li a {
  font-size: 12px;
  color: #666;
}
.main-content .right-service-panel .news-list ul li a:hover {
  color: #e4393c;
}

.main-content .right-service-panel .service-icons {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 0;
  justify-content: space-around; /* 调整为 space-around，让项目均匀分布 */
  align-items: center;
}
.main-content .right-service-panel .service-icons a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50px; /* 调整宽度，留出更多空间 */
  height: 60px;
  margin-bottom: 5px; /* 增加行间距 */
  color: #666;
}
.main-content .right-service-panel .service-icons a i {
  font-size: 24px; /* 放大图标 */
  margin-bottom: 5px;
  color: #666;
}
.main-content .right-service-panel .service-icons a span {
  font-size: 12px;
}
.main-content .right-content-panel .service-icons a:hover {
  color: #e4393c;
}
.main-content .right-service-panel .service-icons a:hover i {
  color: #e4393c;
}
/* 更新已登录用户信息区域的样式 */
.main-content .right-service-panel .logged-in-info {
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中 */
  text-align: center; /* 文本居中 */
  width: 100%;
}

.main-content .right-service-panel .user-avatar-logged-in {
  margin: 0 auto 10px; /* 头像居中 */
}

.main-content .right-service-panel .username-display {
  text-align: center;
  width: 100%;
  margin: 0 auto 10px; /* 用户名居中 */
}

.main-content .right-service-panel .logout-btn-small {
  margin: 0 auto; /* 注销按钮居中 */
  display: block; /* 使按钮可以应用 margin auto */
}

/* #endregion 主内容区-右侧服务区 end */

/* #endregion 主内容区 end */

/* #region 猜你喜欢/为你推荐区域 start */
.recommend-section {
  margin-top: 20px; /* 与上方内容间距 */
  background-color: #fefefe;
  border: 1px solid #f2f2f2;
  padding: 15px 0;
}
.recommend-section .recommend-header {
  margin-bottom: 15px;
  text-align: center;
}
.recommend-section .recommend-header h3 {
  display: inline-block;
  font-size: 20px;
  color: #333;
  font-weight: bold;
  margin-right: 10px;
  position: relative;
  padding-bottom: 5px; /* 下划线留出空间 */
}
.recommend-section .recommend-header h3::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #e4393c;
}
.recommend-section .recommend-header span {
  font-size: 16px;
  color: #999;
}

.recommend-section .recommend-items {
  display: flex; /* 使用Flexbox */
  justify-content: flex-start; /* 修改为左对齐 */
  align-items: flex-start; /* 顶部对齐 */
  flex-wrap: wrap; /* 允许换行 */
  gap: 20px; /* 新增：项目之间的间距 */
  padding: 0 20px; /* 增加左右内边距，使第一项和最后一项不紧贴边缘 */
}

.recommend-section .recommend-item {
  width: 200px; /* 商品项宽度 */
  padding: 10px;
  text-align: center;
  border: 1px solid #eee; /* 细边框 */
  margin-bottom: 15px; /* 底部间距 */
  transition: box-shadow 0.3s ease;
}
.recommend-section .recommend-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.recommend-section .recommend-item img {
  width: 160px;
  height: 160px;
  margin: 0 auto 10px;
  object-fit: contain; /* 保持图片完整 */
}
.recommend-section .recommend-item .title {
  font-size: 14px;
  color: #333;
  height: 40px; /* 留出两行文本空间 */
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 2; /* 限制两行 */
  -webkit-box-orient: vertical;
  margin-bottom: 5px;
}
.recommend-section .recommend-item .price {
  font-size: 18px;
  color: #e4393c;
  font-weight: bold;
  margin-bottom: 10px;
}
.recommend-section .recommend-item .similar-find {
  display: inline-block;
  padding: 5px 15px;
  border: 1px solid #e4393c;
  color: #e4393c;
  border-radius: 3px;
  font-size: 12px;
}
.recommend-section .recommend-item .similar-find:hover {
  background-color: #e4393c;
  color: #fff;
}

/* #endregion 猜你喜欢/为你推荐区域 end */

/* #region 页脚 start */
.footer {
  background-color: #eaeaea; /* 浅灰色背景 */
  padding-top: 30px;
  box-sizing: border-box;
}

.footer .container.top {
  padding-bottom: 24px;
  border-bottom: 1px solid #d9d9d9; /* 浅分割线 */
  margin-bottom: 20px;
}

.footer .top dl {
  width: 180px;
  margin-right: 20px;
}
.footer .top dl:last-of-type {
  margin-right: 0;
}

.footer .top dl span,
.footer .top dl a {
  display: block;
  height: 22px;
  line-height: 22px;
  font-size: 12px;
  color: #666; /* 字体颜色变深 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.footer .top dt span {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #333; /* 标题颜色 */
}

.footer .top dd a:hover {
  color: #e4393c;
}

.footer .top .code {
  width: 100px;
  text-align: center;
}

.footer .top .code span {
  display: block;
  color: #333;
  width: 100%;
  height: 22px;
  line-height: 22px;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
  text-align: center;
}

.footer .top .code img {
  width: 100px;
  margin: 5px auto;
  border: 1px solid #ddd; /* 二维码边框 */
}

.footer .container.bottom {
  font-size: 12px;
  padding: 24px 0;
  border-top: 1px solid #d9d9d9;
}

.footer .bottom div {
  text-align: center;
  height: 22px;
  line-height: 22px;
  margin-bottom: 5px;
}
.footer .bottom div:last-child {
  margin-bottom: 0;
}

.footer .bottom a,
.footer .bottom span {
  color: #999; /* 颜色调整 */
}

.footer .bottom a:hover {
  color: #e4393c;
}

.footer .bottom .separate {
  border: 1px solid #ccc; /* 分隔符颜色 */
  vertical-align: middle;
}
/* #endregion 页脚 end */
